<template>
  <view class="discount">
    <u-sticky bgColor="#fff" v-if="!isSelect">
      <u-tabs
        :list="list"
        :scrollable="false"
        @change="handleChange"
        :activeStyle="{
          color: '#FD4D00',
        }"
        lineColor="#FD4D00"
        lineWidth="50"
      ></u-tabs>
    </u-sticky>
    <view class="list">
      <u-list
        v-if="orderList.length !== 0"
        :height="listHeight.height"
        @scrolltolower="getMore"
      >
        <u-list-item v-for="item in orderList" :key="item.id">
          <Discount :data="item" @click="handeClick"></Discount>
        </u-list-item>
      </u-list>
      <emptyList v-else></emptyList>
    </view>
  </view>
</template>

<script setup>
import Discount from "@/components/discount/discount.vue";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useListHeight } from "@/hooks/useListHeight.js";
import { useList } from "@/hooks/useList";
const { listHeight } = useListHeight({
  el: ".list",
});
const isSelect = ref(false);
onLoad((params) => {
  if (params.isSelect) {
    isSelect.value = true;
  }
});

const list = ref([
  {
    name: "全部",
    value: "all",
  },
  {
    name: "未使用",
    value: "1",
  },
  {
    name: "已使用",
    value: "2",
  },
  {
    name: "已过期",
    value: "3",
  },
]);

const handleChange = (item) => {
  resetList();
};

const getList = async (item) => {
  return {
    list: [1, 2, 3, 4, 5, 6, 7],
    totoal: 100,
  };
};
const { orderList, getMore, resetList } = useList(getList);
const handeClick = () => {
  console.log("点击优惠券");
  if (isSelect.value) {
    uni.navigateBack();
  }
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.list {
  .initList {
    margin-top: 10px;
    &.card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .item {
        &:last-child {
          &:nth-child(2n - 1) {
            margin-right: 50%;
          }
        }
      }
    }
  }
}
</style>
